import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { themeAtom } from "../atom"
import { NavLink } from "react-router-dom"
import { SvgComponent } from "@/components/base/Svg"

interface SettingItemProps {
    icon: string | React.ReactNode
    name: string
    arrowDes?: string
    arrowBtn?: 0 | 1
    showBottomLine?: boolean
    to?: string
    onClick?: () => void
}

const SettingContainer = styled.div`
    display: flex;
    flex-direction: column;
    padding: 12rem 16rem 0;
`
const SettingLine = styled.div`
    display: flex;
    align-items: center;
    width: 319rem;
    height: 24rem;
`

const StyledNavLink = styled(NavLink)`
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    width: 319rem;
    height: 24rem;
    cursor: pointer;
`

const SettingIcon = styled.img`
    width: 24rem;
    height: 24rem;
`

const SettingTitle = styled.div`
    text-decoration: none;
    width: 119rem;
    height: 24rem;
    line-height: 24rem;
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 16rem;
    margin-right: 16rem;
    margin-left: 12rem;
`
const RightContent = styled.div`
    width: 148rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
`

const RightArrow = styled(SvgComponent("pages/UserCenterPage/right_arrow.svg"))`
    width: 7.4rem;
    height: 14rem;
`

const BottomLine = styled.div`
    width: 283rem;
    height: 0rem;
    border-bottom: 1px solid #d5d5d8;
    margin-left: 36rem;
    margin-top: 12rem;
`

const SettingDes = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 16rem;
    width: 120rem;
    text-align: right;
    margin-right: 18rem;
`

interface ThemeContentProps {
    isActive?: boolean
    isLight?: string
}

const ThemeContent = styled.div<ThemeContentProps>`
    width: 88rem;
    height: 24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: ${(props) => (props.isLight === "light" ? "#f2f2f3" : "#0d0d1b")};
`

// 主题切换按钮样式
const ThemeToggle = styled.div<ThemeContentProps>`
    width: 40rem;
    height: 20rem;
    margin-right: 2rem;
    margin-left: 2rem;
    border-radius: 2rem;
    background-color: ${(props) =>
        props.isActive && props.isLight === "light"
            ? "#FFFFFF"
            : !props.isActive && props.isLight === "light"
              ? "#f2f2f3"
              : props.isActive && props.isLight === "dark"
                ? "#0d0d1b"
                : "#1c1c36"};
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
`

const ThemeIcon = styled.img<ThemeContentProps>`
    font-size: 16rem;
    color: ${(props) => (props.isLight ? "#FFFFFF" : "#69728C")};
`
const ThemeIconLight = styled(SvgComponent("pages/UserCenterPage/sun.svg"))`
    width: 16rem;
    height: 16rem;
    color: #ffffff;
`
const ThemeIconLight1 = styled(SvgComponent("pages/UserCenterPage/sun1.svg"))`
    width: 16rem;
    height: 16rem;
    color: #69728c;
`
const ThemeIconMoon = styled(SvgComponent("pages/UserCenterPage/moon1.svg"))`
    width: 16rem;
    height: 16rem;
    color: #ffffff;
`
const ThemeIconMoon1 = styled(SvgComponent("pages/UserCenterPage/moon.svg"))`
    width: 16rem;
    height: 16rem;
    color: #69728c;
`
const IconWrapper = styled.div`
    width: 24rem;
    height: 24rem;
`
const SettingItem: React.FC<SettingItemProps> = ({
    icon,
    name,
    arrowDes,
    arrowBtn = 0,
    showBottomLine = true,
    to,
    onClick,
}) => {
    const [theme, setTheme] = useAtom(themeAtom)

    const handleThemeToggle = (newTheme: "light" | "dark", e: React.MouseEvent) => {
        e.stopPropagation()
        setTheme(newTheme)
    }
    const renderIcon = () => {
        if (typeof icon === "string") {
            return <SettingIcon src={icon} />
        }
        if (typeof icon === "object" && icon !== null) {
            return <IconWrapper>{icon as React.ReactElement}</IconWrapper>
        }
        return null
    }
    const renderContent = () => {
        return (
            <SettingLine onClick={onClick}>
                {renderIcon()}
                <SettingTitle>{name}</SettingTitle>
                <RightContent>
                    {arrowDes && <SettingDes>{arrowDes}</SettingDes>}
                    {arrowBtn === 0 && <RightArrow />}
                </RightContent>

                {name === "Theme" && (
                    <ThemeContent isLight={theme}>
                        <ThemeToggle
                            isLight={theme}
                            isActive={theme === "light"}
                            onClick={(e: React.MouseEvent) => handleThemeToggle("light", e)}
                        >
                            {theme === "light" ? <ThemeIconLight /> : <ThemeIconLight1 />}
                        </ThemeToggle>
                        <ThemeToggle
                            isLight={theme}
                            isActive={theme === "dark"}
                            onClick={(e: React.MouseEvent) => handleThemeToggle("dark", e)}
                        >
                            {theme === "dark" ? <ThemeIconMoon /> : <ThemeIconMoon1 />}
                        </ThemeToggle>
                    </ThemeContent>
                )}
            </SettingLine>
        )
    }
    return (
        <SettingContainer>
            {to ? <StyledNavLink to={to}>{renderContent()}</StyledNavLink> : renderContent()}
            {showBottomLine && <BottomLine />}
        </SettingContainer>
    )
}

export default SettingItem
